<template>
  <CommonPage>
    <MyTable
      ref="$table"
      :columns="columns"
      :get-data="informApi.list"
      :index="true"
      list-key="notice_list"
    ></MyTable>
    <MyModal
      ref="$form"
      :model-form="model"
      :disabled="type === 'view'"
      :width="900"
      @submit="handleSubmit"
    >
      <n-form-item label="通知类型" path="type">
        <n-input
          v-model:value="model.type"
          placeholder="请输入通知类型"
          maxlength="30"
          clearable
          :disabled="true"
        />
      </n-form-item>
      <n-form-item label="通知内容" path="content">
        <n-input
          v-model:value="model.content"
          clearable
          :maxlength="300"
          show-count
          type="textarea"
          :autosize="{
            minRows: 3,
          }"
        />
      </n-form-item>
      <n-form-item label="通知人员" path="persons">
        <AsyncSelect
          v-model:value="model.persons"
          :options="getUserOptions"
          label-key="name"
          value-key="userId"
          :remote="true"
          :init-remote="true"
          :multiple="true"
        />
      </n-form-item>
    </MyModal>
  </CommonPage>
</template>

<script setup lang="jsx">
import * as informApi from '@/api/inform'
import { useCrudPro } from '@/hooks/useCrudPro'
import { userSel } from '@/api/user'
import { formatToIds } from '@/utils/format'
defineOptions({ name: 'InformIndex' })
const columns = [
  { key: 'type', title: '通知类型' },
  { key: 'content', title: '通知内容' },
  { key: 'persons', title: '通知人员' },
  {
    title: '操作',
    key: 'actions',
    width: 220,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <n-button v-permission="notice_update" text onClick={() => handleEdit(row)}>
            修改
          </n-button>
        </n-flex>
      )
    },
  },
]
const { type, model, $form, $table, handleEdit, handleSubmit } = useCrudPro({
  name: '通知配置',
  initForm: {
    id: null,
    type: null,
    content: null,
    persons: null,
  },
  apis: {
    edit: informApi.edit,
    info: (row) =>
      informApi.info(row.id).then(({ data }) => {
        data['id'] = row.id
        data['type'] = row.type
        return data
      }),
  },
})
function getUserOptions(name, userIds) {
  return userSel({ name, userIds: formatToIds(userIds) }).then((res) => res.data)
}
</script>
